<body style=" background-color: #bfc7c1;">
    <link rel="stylesheet" href="static/css/AppletUserManagement.css">
    <link rel="stylesheet" href="static/css/base.css">
    <div id='AppletUserManagement' class="AppletUserManagement">
        <div class="top">
            <div class="top_a">
                <div class="top_a1">
                    <input type="text" placeholder="_openid / 姓名" v-model="keyWord">
                    <img src="static/images/path.png" alt="">
                </div>
            </div>
            <div class="top_b">
                <div class="top_b1" @click="Refresh"> <img src="static/images/icon_refresh.png" alt=""> Refresh</div>
            </div>
        </div>
        <div class="middle">
            <div class="box">

                <table cellspacing="0" cellpadding="0">
                    <thead class="box-top">
                        <tr>
                            <th class="a pic">头像</th>
                            <th class="a _openid">_openid</th>
                            <th class="a _name">姓名</th>
                            <th class="a department">隶属部门 <img src="static/images/筛选.svg" alt=""></th>
                            <th class="a position">职位 <img src="static/images/筛选.svg" alt=""></th>
                            <th class="a operation"></th>
                        </tr>
                    </thead>
                    <tr class="box-top-occupied"></tr>

                    <tbody class="box-content">
                        <tr v-for="(p,index) of filusersInfo">
                            <td class="c b pic"><img :src="p.avatarUrl" alt=""></td>
                            <td class="c b _openid"> {{p._openid}}</td>
                            <td class="c b _name">{{p.realName}} </td>
                            <!-- <td class="c b department " @click="isselect=!isselect">{{p.department}}<img
                                    src="static/images/下拉.svg" alt=""> -->
                            <td class="c b department" @click="selectDepartment(index,p)">
                                {{p.department}}<img src="static/images/下拉.svg" alt="">
                                <div class="select" v-show="p.isselect">
                                    <!-- <div class="select" v-show="p.isselect"> -->
                                    <div class="select_"></div>
                                    <ul>
                                        <li @click="gain($event,p)" :id="p._openid">{{department_1}}</li>
                                        <li @click="gain($event,p)" :id="p._openid">{{department_2}}</li>
                                        <li @click="gain($event,p)" :id="p._openid">{{department_3}}</li>
                                        <li @click="gain($event,p)" :id="p._openid">{{department_4}}</li>
                                        <li @click="gain($event,p)" :id="p._openid">{{department_5}}</li>
                                        <li @click="gain($event,p)" :id="p._openid">{{department_6}}</li>
                                        <li @click="gain($event,p)" :id="p._openid">{{department_7}}</li>
                                    </ul>
                                </div>
                            </td>

                            <td class="c b position ">
                                <div class="position_a"><input type="text" v-model="p.Position"
                                        @keyup.enter="submit($event,p)" @blur="submit($event,p)"
                                        @focus="hint($event,p)">
                                </div>
                            </td>
                            <td class=" b operation   "><img src="static/images/cancel-test.svg" alt=""
                                    @click="del($event,p)">
                            </td>

                        </tr>

                    </tbody>
                </table>




            </div>
        </div>

    </div>

    </div>
    <script>

        // 利用排他思想做tab切换页面
        // var AppletUserManagement = document.querySelector('.AppletUserManagement');
        // var top_b2 = AppletUserManagement.querySelector('.top_b2');
        // var NewAccount = document.querySelector('.NewAccount');
        // var NewAccount_top_a = NewAccount.querySelector('.NewAccount_top_a');
        // top_b2.onclick = function () {
        //     AppletUserManagement.style.display = 'none';
        //     NewAccount.style.display = 'block';
        // }
        // NewAccount_top_a.onclick = function () {
        //     AppletUserManagement.style.display = 'block';
        //     NewAccount.style.display = 'none';
        // }
        const c = window.cloud
        Vue.prototype.cloud = c
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        Vue.config.devtools = true
        // const clouds = require('wx-server-sdk')
        //这个不是在这里写的

        const vm = new Vue({
            el: '.AppletUserManagement',
            data() {

                return {
                    progressInfo: 'authority',
                    //inputMessage输入信息
                    usersInfo: [], //用户对象.
                    _openid: '',
                    realName: "",
                    department: "",
                    Position: '',
                    // isselect: true,
                    avatarUrl: '',
                    department_1: "PC技术部",
                    department_2: "新媒体运营部 ",
                    department_3: "UI技术部",
                    department_4: "影视部",
                    department_5: "动画部",
                    department_6: "秘书处",
                    department_7: "网络研发部",
                    index: '',
                    keyWord: '',
                    filusersInfo: [],
                }
            },
            methods: {
                selectDepartment(index, p) {
                    this.filusersInfo[index].isselect = !this.filusersInfo[index].isselect;
                    console.log('wahh');


                },
                //配置微信
                async initWx() {
                    //创建新的cloud实例
                    var c1 = new this.cloud.Cloud({
                        identityless: true,
                        // 资源方 AppID 填自己的
                        resourceAppid: 'wx96f760966921f98a',
                        // 资源方环境 ID	填自己的
                        resourceEnv: 'cloud1-8g54d6xb74e96e7d'
                    })
                    //初始化,使用await将异步转化为同步
                    await c1.init()
                    console.log('初始化完成');
                    this.cloud = c1
                    this.db = this.cloud.database()
                },

                getMessage() {

                    this.db.collection("Users").get().then(res => {
                        console.log(res);
                        // 我要的数据是res.data
                        this.usersInfo = res.data;
                        this.filusersInfo = this.usersInfo;
                        for (let i = 0; i < res.data.length; i++) {
                            // 我要为这些数据的每个对象追加一个isselect属性
                            res.data[i]['isselect'] = false;

                        }
                    }
                    )




                    // const MAX_LIMIT = 20

                    // 先取出集合记录总数

                    // this.db.collection('Users').count().then(async res => {
                    // console.log(res);
                    //我看看
                    //取到W
                    // const total = res.total
                    // 计算需分几次取
                    // const batchTimes = Math.ceil(total / 20)
                    //stop ，我来了
                    // 承载所有读操作的  的数组
                    //你这个老六，你怎么写const
                    // var oldData = []
                    //这里思路是正确的
                    // for (let i = 0; i < batchTimes; i++) {
                    //看看你的get,写了啥
                    //不要动
                    // await this.db.collection('Users').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get().then(res => {
                    //     console.log(res);
                    // 我要的数据是res.data
                    // for (let i = 0; i < res.data.length; i++) {
                    // 我要为这些数据的每个对象追加一个isselect属性
                    //     res.data[i]['isselect'] = false;

                    // }
                    //每次拿到数据后就把数据储存起来
                    //这里格式有问题，res.data是一个数组，push，方法是把这个数组当成
                    //数组的‘单项’放进去，所以这个数组里面每一项都是一个数组
                    // oldData = res.data
                    //dengyixa hao
                    // }
                    // )
                    //每一次请求完拿完数据就把数据推进去
                    //应该使用 数组拼接++
                    //         this.usersInfo = this.usersInfo.concat(oldData);
                    //         this.filusersInfo = this.usersInfo

                    //     }
                    //     console.log("所有的数据");
                    //     console.log(this.filusersInfo);
                    // }).catch(error => {
                    //     console.log(error);
                    // })




                }
                ,

                del(e, p) {
                    console.log(p);
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', null, [
                            h('span', null, '此操作将永久删除此账号, 是否继续? '),

                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                instance.confirmButtonLoading = true;
                                instance.confirmButtonText = '执行中...';
                                this.db.collection('Users').where({ _openid: p._openid }).remove({
                                    success: res => {
                                        console.log(res);
                                        if (res.stats.removed) {
                                            setTimeout(() => {
                                                done();
                                                setTimeout(() => {
                                                    instance.confirmButtonLoading = false;
                                                }, 300);
                                            }, 3000);
                                        }
                                    },
                                    fail: res => {

                                        console.log(res);

                                    }
                                })

                            } else {
                                done();
                            }
                        }
                    }).then(action => {
                        this.$message({
                            type: 'success',
                            message: '永久删除成功 '
                        });
                        this.db.collection("Users").get().then(res => {
                            console.log(res);
                            // 我要的数据是res.data
                            this.usersInfo = res.data;
                            this.filusersInfo = this.usersInfo;
                        }
                        )

                    }).catch((error) => {
                        console.log(error);
                    });

                },
                gain(e, p) {
                    // this.usersInfo[index].isselect = !this.usersInfo[index].isselect;
                    console.log(e);
                    // p.department = e.target.outerText;
                    e.srcElement.id;
                    p.department = e.target.outerText;
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', null, [
                            h('span', null, '此操作将更改该用户所属部门, 是否继续? '),

                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                instance.confirmButtonLoading = true;
                                instance.confirmButtonText = '执行中...';
                                this.db.collection('Users').where({ _openid: p._openid }).update({
                                    data: {
                                        department: p.department
                                    },
                                    success: res => {
                                        console.log(res);
                                        if (res.stats.updated) {
                                            setTimeout(() => {
                                                done();
                                                setTimeout(() => {
                                                    instance.confirmButtonLoading = false;
                                                }, 300);
                                            }, 3000);
                                        }
                                    },
                                    fail: res => {

                                        console.log(res);

                                    }
                                })

                            } else {
                                done();
                            }
                        }
                    }).then(action => {
                        try {
                            this.$message({
                                type: 'success',
                                message: '更改成功'
                            });
                            this.db.collection("Users").get().then(res => {
                                console.log(res);
                                // 我要的数据是res.data
                                for (let i = 0; i < res.data.length; i++) {
                                    // 我要为这些数据的每个对象追加一个isselect属性
                                    res.data[i]['isselect'] = false;
                                }
                                this.usersInfo = res.data;
                                //没有select
                                this.filusersInfo = this.usersInfo;
                            }
                            )
                        } catch (error) {
                            console.log(error);
                        }


                    })
                },
                Refresh() {
                    this.getMessage();
                    // this.db.collection("Users").get().then(res => {
                    //     console.log(res);
                    //     // 我要的数据是res.data
                    //     for (let i = 0; i < res.data.length; i++) {
                    //         // 我要为这些数据的每个对象追加一个isselect属性
                    //         res.data[i]['isselect'] = false;
                    //     }
                    //     this.usersInfo = res.data;
                    //     this.filusersInfo = this.usersInfo;

                    // }
                    // )
                },
                submit(e, p) {
                    const h = this.$createElement;
                    if (p.Position == '干事' || p.Position == '部长' || p.Position == '副部长' || p.Position == '主席' || p.Position == '副主席') {
                        this.$msgbox({
                            title: '提示',
                            message: h('p', null, [
                                h('span', null, '此操作将更改该用户部门职位, 是否继续? '),

                            ]),
                            showCancelButton: true,
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            beforeClose: (action, instance, done) => {
                                if (action === 'confirm') {
                                    instance.confirmButtonLoading = true;
                                    instance.confirmButtonText = '执行中...';
                                    this.db.collection('Users').where({ _openid: p._openid }).update({
                                        data: {
                                            Position: p.Position
                                        },
                                        success: res => {
                                            console.log(res);
                                            if (res.stats.updated) {
                                                setTimeout(() => {
                                                    done();
                                                    setTimeout(() => {
                                                        instance.confirmButtonLoading = false;
                                                    }, 300);
                                                }, 3000);
                                            }
                                        },
                                        fail: res => {

                                            console.log(res);

                                        }
                                    })

                                } else {
                                    done();
                                }
                            }
                        }).then(action => {
                            try {
                                this.$message({
                                    type: 'success',
                                    message: '更改成功'
                                });
                                this.db.collection("Users").get().then(res => {
                                    console.log(res);
                                    // 我要的数据是res.data
                                    for (let i = 0; i < res.data.length; i++) {
                                        // 我要为这些数据的每个对象追加一个isselect属性
                                        res.data[i]['isselect'] = false;
                                    }
                                    this.usersInfo = res.data;
                                    this.filusersInfo = this.usersInfo;
                                }
                                )
                            } catch (error) {
                                console.log(error);
                            }


                        })

                    }
                    else {
                        this.$message({
                            type: 'warning',
                            message: '请填写正确的职位名称'
                        })
                        return false
                    }
                }
                ,
                hint(e, p) {
                    this.$message({
                        type: 'warning',
                        message: '请按回车键或者让输入框失去焦点后进行更改操作'
                    })

                }


            },
            watch: {
                keyWord: {
                    immediate: true,
                    handler(val) {
                        this.filusersInfo = this.usersInfo.filter((p) => {
                            // console.log(this.keyWord);
                            // console.log(p);
                            return ((p.realName ? (p.realName.indexOf(this.keyWord) !== -1) : null) || (p._openid ? (p._openid.indexOf(this.keyWord) !== -1) : null));


                        })
                    }
                }
            },
            // // computed: {
            // //     filusersInfo() {
            // //         return this.usersInfo.filter((p) => {
            // //             // console.log(this.keyWord);
            // //             // console.log(p);
            // //             //当条件复杂时，最好把条件用括号包起来
            // //             return ((p.realName ? (p.realName.indexOf(this.keyWord) !== -1) : null) || (p._openid ? (p._openid.indexOf(this.keyWord) !== -1) : null));

            // //         })


            // //     }

            // },

            async created() {
                await this.initWx();
                //获取列表数据
                await this.getMessage();
            }
        })

    </script>
</body>